<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test2</title>
</head>
<body>
<div id="main" style="width: 100%;height:100vh;" ></div>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/echarts/3.8.5/echarts.min.js"></script>
<script>
    (function init(){

    }())

    //中山市地图轮廓信息
    var as = {"type": "FeatureCollection", "features": [{"type":"Feature","properties":{"name":"中山市"},"geometry":{"type":"MultiPolygon","coordinates":[[[[113.587345,22.5138430000001],[113.582908964844,22.5570851875],[113.573624296875,22.521977765625],[113.569637480469,22.4759206367188],[113.573616972656,22.4581716132813],[113.555513945313,22.4456740546876],[113.547345,22.413843],[113.491790800781,22.4093971992187],[113.480477324219,22.3952663398438],[113.493079863281,22.3284352851563],[113.470553007813,22.310395734375],[113.487323027344,22.2818679023438],[113.51107546875,22.2628469062501],[113.481790800781,22.2393971992188],[113.472899199219,22.2282888007813],[113.452093535156,22.2116310859376],[113.407345,22.203843],[113.3857825,22.23507346875],[113.340513945313,22.2520119453125],[113.313260527344,22.3297585273438],[113.278533964844,22.382309796875],[113.247345,22.4038430000001],[113.241209746094,22.4639943671875],[113.214534941406,22.511801984375],[113.177345,22.543843],[113.17123171875,22.5927223945313],[113.157345,22.603843],[113.148944121094,22.6238430000001],[113.163543730469,22.6586037421875],[113.157345,22.683843],[113.192010527344,22.6758107734376],[113.20170046875,22.6994875312501],[113.231082792969,22.7391164375],[113.246263457031,22.74819846875],[113.262110625,22.7276686835938],[113.28170046875,22.73948753125],[113.32298953125,22.74819846875],[113.350238066406,22.7646364570313],[113.357345,22.773843],[113.415872832031,22.7405690742187],[113.44197390625,22.73847190625],[113.447345,22.733843],[113.532655058594,22.6716579414063],[113.531803007813,22.6501686835938],[113.552154570313,22.6186525703125],[113.577345,22.603843],[113.570909453125,22.5881789375001],[113.614908476563,22.5765700507813],[113.603170195313,22.5180178046875],[113.587345,22.5138430000001]]]]}}]}

    //引入新疆地区地图
    echarts.registerMap('新疆', as);
    var myChart = echarts.init(document.getElementById('main'));

    //各镇区坐标
    var geoCoordMap = {
        '石岐区街道办事处': [113.395461,22.5425],
        '东区街道办事处': [113.382518,22.506297],
        '火炬开发区街道办事处': [113.489223,22.572436],
        '西区街道办事处': [113.213274,22.690175],
        '南区街道办事处': [113.420032,22.439542],
        "五桂山": [113.417071,22.52595],
        '小榄镇': [113.257806,22.677377],
        '黄圃镇': [113.345798,22.716774],
        '民众镇': [113.500096,22.627524],
        '东升镇': [113.297991,22.628979],
        '古镇镇': [113.197393,22.619293],
        '坦洲镇': [113.474307,22.260588],
        '港口镇': [113.39153,22.591756],
        '三角镇': [113.424476,22.682489],
        '横栏镇': [113.271203,22.529531],
        '南头镇': [113.298283,22.723521],
        '阜沙镇': [113.356417,22.672922],
        '南朗镇': [113.537483,22.504879],
        '三乡镇': [113.447976,22.363792],
        '板芙镇': [113.32855,22.422132],
        '大涌镇': [113.307187,22.471243],
        '神湾镇': [113.370276,22.308298],
    };

    // 每个地区的设备数量值
    var data = [{
        name: '石岐区街道办',
        value: 390,
        alarm_num: 54
    }, {
        name: '东区街道办',
        value: 119
    }, {
        name: '火炬开发区街道办',
        value: 55,
        alarm_num: 9
    }, {
        name: '西区街道办',
        value: 329
    }, {
        name: '南区街道办',
        value: 219,
        alarm_num: 14
    }, {
        name: '五桂山',
        value: 290
    }, {
        name: '小榄镇',
        value: 319,
        alarm_num: 2
    }, {
        name: '黄圃镇',
        value: 199
    }, {
        name: '民众镇',
        value: 419,
        alarm_num: 11
    }, {
        name: '东升镇',
        value: 299
    }, {
        name: '古镇镇',
        value: 49
    }, {
        name: '坦洲镇',
        value: 219,
        alarm_num: 15
    }, {
        name: '港口镇',
        value: 89
    }, {
        name: '三角镇',
        value: 49
    }, {
        name: '横栏镇',
        value: 209,
        alarm_num: 27
    }, {
        name: '南头镇',
        value: 129
    }, {
        name: '阜沙镇',
        value: 49,
        alarm_num: 7
    }, {
        name: '南朗镇',
        value: 229
    }, {
        name: '三乡镇',
        value: 229
    }, {
        name: '板芙镇',
        value: 229
    }, {
        name: '大涌镇',
        value: 229
    }, {
        name: '神湾镇',
        value: 229
    }];

    // 每个地区的设备告警数量
    var data2 = data


    var convertData = function (data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
            var geoCoord = geoCoordMap[data[i].name];
            if (geoCoord) {
                res.push({
                    name: data[i].name,
                    value: geoCoord.concat(data[i].value),
                });
            }
        }
        // 有数据的地区的名称和value值
        return res;
    };

    // 设定series是一个空的数组
    var series = [];
    [
        ['新疆', data]
    ].forEach(function (item, i) {
        series.push({//波纹点
            name: '定位点',
            type: 'effectScatter', // 散点图
            coordinateSystem: 'geo', // 使用地理坐标系
            hoverAnimation: 'false',
            legendHoverLink: 'false',
            rippleEffect: {
                period: 4,
                brushType: 'stroke',
                scale: 3
            },
//            data: convertData(item[1]),//数据格式: {name:'',value:[x,y,val]}
            symbolSize: function (val) {
                var val = val[2]

                if(val > 200)
                    return 13

                return 8
//                if (val[2] <= 100) {
//                    return 4
//                }
//                if (val[2] > 100 && val[2] <= 200) {
//                    return 8
//                }
//                if (val[2] > 200 && val[2] <= 300) {
//                    return 12
//                }
//                if (val[2] > 300 && val[2] <= 400) {
//                    return 16
//                }
//                if (val[2] > 400 && val[2] <= 500) {
//                    return 20
//                }
//                if (val[2] > 500) {
//                    return 24
//                }
            },
            itemStyle: {
                normal: {
                    color: '#5599E4',
                }
            },
            zlevel: 1,
        }, {//就只是地图的显示而已
            type: 'map',
            map: '新疆',
            zlevel: 0,
            itemStyle: {
                normal: {
                    areaColor: '#323c48',
                    borderColor: '#111'
                },
                emphasis: {
                    areaColor: '#2a333d'
                }
            },
            label: {
                normal: {
                    show: true,
                    textStyle: {
                        color: '#ddb926',
                        fontSize: 10
                    },
                },
                emphasis: {
                    textStyle: {
                        color: '#ddb926',
                        fontSize: 10
                    },
                }

            },
//            data: data
        }, {//这个是红色表示点
            name: '点',
            type: 'scatter',
            coordinateSystem: 'geo',
            symbol: 'pin',
            symbolSize: function(val){
                var val = val[2]
                if(val > 200)
                    return 45

                return 35
            },
            label: {
                normal: {
                    show: true,
                    textStyle: {
                        color: '#fff',
                        fontSize: 15,
                    }
                }
            },
            itemStyle: {
                normal: {
                    color: '#F62157', //标志颜色
                }
            },
            zlevel: 6,
//            data: convertData(data2)//数据格式 {name:'',value:[x,y,val]}，只会取val出来显示
        });
    });

    option = {
        backgroundColor: '#4f5555',
        title: {
            text: '新疆设备部署图',
            subtext: '散点圆的大小随设备数量改变而改变',
            left: 'center',
            textStyle: {
                color: '#7bbfea'
            }
        },
        geo: {
            map: '新疆',
            label: {
                textStyle: {
                    fontSize: '.1rem',
                }
            },
            itemStyle: {
                normal: {
                    areaColor: '#fff',
                    borderColor: '#587A9F'
                },
                emphasis: {
                    areaColor: '#ccc'
                }
            }
        },
        series: series
    };
    myChart.setOption(option);

    function setSeries(){
        myChart.setOption({
            series: [{data: convertData(data)},{},{data: convertData(data2)}]
        })
    }

</script>
</body>
</html>